import React, { PureComponent } from "react";
import { Button, Row, Col, Table, Input, Divider } from "antd";
import { connect } from "dva";
import DocAssetsPublishModel from "./DocAssetModal"

const { Search } = Input;


class DocTable extends PureComponent {
    
    render() {

        const { tableData, selectedRowKeys,featureColumns,tableCurrentPage,tableSearchValue } = this.props.docAssetsState

        let nameColumnDataIndex = null
        let nameTitle = null
        const tmpFeatureColumns = [...featureColumns]
        for(let i = 0; i<tmpFeatureColumns.length;i++){
            if(tmpFeatureColumns[i].code === 'docName'){
                nameColumnDataIndex = tmpFeatureColumns[i].dataIndex
                nameTitle = tmpFeatureColumns[i].title
                tmpFeatureColumns.splice(i,1)
            }
        }
        const startColumns = [
            {
                title: nameTitle?nameTitle:'文档名称',
                dataIndex: nameColumnDataIndex?nameColumnDataIndex:'docName',
                render: (text, record) => <a onClick={() => { window.open("/cwm/document/download/"+record.instanceId) }}>{text}</a>,
            }
        ]

        const endColumns = [
            {
                title: '操作',
                dataIndex: 'action',
                render: (text, record) => (
                    <span>
                        <a onClick={() => this.props.editInfo(record)} title={text}>编辑</a>
                        <Divider type="vertical" />
                        <a href={"/cwm/document/download/"+record.instanceId} download={record[nameColumnDataIndex]}>下载</a>
                        
                    </span>
                ),
            }
        ]

        
        const tableColumns = [...startColumns,...tmpFeatureColumns,...endColumns];

        const rowSelections = {
            selectedRowKeys: selectedRowKeys,
            onChange: this.props.handleSelectedRowKeys,
            type: 'radio'
        }

        return (
            <div>
                <Row type='flex'>
                    <Col span={12}>
                        <Search placeholder="文档名称" 
                        value={tableSearchValue} 
                        onChange = {this.props.changeTableSearchValue}
                        onSearch={value => this.props.handleSearch(value)} 
                        enterButton />
                    </Col>
                    <Col span={2} offset={7}>
                        <Button type="primary" onClick={() => { this.props.showPublishModal(true) }}>发布</Button>
                    </Col>
                    <Col span={2} offset={1}>
                        <Button type="danger" onClick={() => { console.log(rowSelections) }}>删除</Button>
                    </Col>
                </Row>
                <Table
                    style={{ marginTop: '20px' }}
                    columns={tableColumns}
                    dataSource={tableData?tableData.entityData:[]}
                    rowSelection={rowSelections}
                    rowKey='instanceId'
                    pagination = {{current:tableCurrentPage}}
                    onChange = {(pagination) => {
                        console.log("pagination change : ",pagination)
                        this.props.changeTableCurrentPage(pagination.current)
                    }}
                    
                />
                <DocAssetsPublishModel/>
            </div>

        )
    }


    componentDidMount(){
        this.props.queryTableColumns()
        this.props.queryDocumentList()
    }
}

const mapStateToProps = (state) => {
    return {
        docAssetsState : state.docAssets
    }
}

const mapDispatch = (dispatch) => {
    return {
        handleSearch(tableKeyWord){
            dispatch({
                type: 'docAssets/changeTableKeyWord',
                payload:{tableKeyWord}
            })
            dispatch({
                type: 'docAssets/changeTableCurrentPage',
                payload:{tableCurrentPage:1}
            })
            dispatch({
                type: 'docAssets/queryDocumentList'
            })
        },
        changeTableCurrentPage(tableCurrentPage){
            dispatch({
                type: 'docAssets/changeTableCurrentPage',
                payload:{tableCurrentPage}
            })
            dispatch({
                type: 'docAssets/queryDocumentList'
            })
        },
        changeTableSearchValue(e){
            dispatch({
                type: 'docAssets/changeTableSearchValue',
                payload:{tableSearchValue:e.target.value}
            })
        },
        handleSelectedRowKeys(selectedRowKeys) {
            dispatch({
                type: 'docAssets/changeSelectedRowKeys',
                payload:{selectedRowKeys}
            })
        },
        showPublishModal(show) {
            dispatch({
                type: 'docAssets/showPublishModal',
                payload:{docListModalVisible: show}
            })
        },
        editInfo(record){
            dispatch({
                type: 'docAssets/changePublishModalData',
                payload:{docListModalData:record}
            })
            dispatch({
                type: 'docAssets/queryDocumentInfo'
            })
            dispatch({
                type: 'docAssets/showPublishModal',
                payload:{docListModalVisible: true}
            })
        },
        queryTableColumns() {
            dispatch({
                type: 'docAssets/queryTableClassifier'
            })
        },
        queryDocumentList() {
            dispatch({
                type: 'docAssets/queryDocumentList'
            })
        },
    }
}


export default connect(mapStateToProps,mapDispatch)(DocTable)